<template>
	<view class="chat-container">
		<!-- 聊天消息区域 -->
		<scroll-view 
			class="chat-messages" 
			scroll-y="true"
			:scroll-top="scrollTop"
			@scrolltoupper="loadMoreMessages"
		>
			<view 
				class="message-item"
				v-for="(message, index) in messages" 
				:key="index"
				:class="{ 'user-message': message.type === 'user', 'service-message': message.type === 'service' }"
			>
				<!-- 客服消息 -->
				<view v-if="message.type === 'service'" class="service-message-content">
					<view class="avatar">
						<u-icon name="headphone" size="20" color="#fff"></u-icon>
					</view>
					<view class="message-bubble">
						<view class="message-title" v-if="message.title">{{ message.title }}</view>
						<view class="message-content">
							<view 
								class="message-text"
								v-for="(text, textIndex) in message.content" 
								:key="textIndex"
							>
								{{ text }}
							</view>
						</view>
					</view>
				</view>
				
				<!-- 用户消息 -->
				<view v-if="message.type === 'user'" class="user-message-content">
					<view class="message-bubble">
						{{ message.content }}
					</view>
					<view class="avatar">
						<u-icon name="account" size="20" color="#fff"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 输入区域 -->
		<view class="input-area">
			<!-- 语音按钮 -->
			<view class="voice-btn" @click="toggleVoiceInput">
				<u-icon name="mic" size="24" color="#666"></u-icon>
			</view>
			
			<!-- 输入框 -->
			<view class="input-wrapper">
				<u-input
					v-model="inputText"
					placeholder="请输入您的问题..."
					:border="false"
					@input="onInputChange"
					@focus="onInputFocus"
					@blur="onInputBlur"
				></u-input>
			</view>
			
			<!-- 发送按钮 -->
			<view 
				class="send-btn"
				:class="{ 'active': canSend }"
				@click="sendMessage"
			>
				发送
			</view>
		</view>

		<!-- 键盘区域 -->
		<view class="keyboard-container" v-if="showKeyboard">
			<!-- 联想词栏 -->
			<view class="suggestion-bar">
				<view 
					class="suggestion-item"
					v-for="(word, index) in suggestions" 
					:key="index"
					@click="selectSuggestion(word)"
				>
					{{ word }}
				</view>
				<view class="suggestion-arrow">
					<u-icon name="arrow-up" size="12" color="#999"></u-icon>
				</view>
			</view>
			
			<!-- QWERTY键盘 -->
			<view class="keyboard">
				<!-- 第一行 -->
				<view class="key-row">
					<view 
						class="key-item"
						v-for="key in firstRow" 
						:key="key"
						@click="onKeyPress(key)"
					>
						{{ key }}
					</view>
				</view>
				
				<!-- 第二行 -->
				<view class="key-row">
					<view 
						class="key-item"
						v-for="key in secondRow" 
						:key="key"
						@click="onKeyPress(key)"
					>
						{{ key }}
					</view>
				</view>
				
				<!-- 第三行 -->
				<view class="key-row">
					<view class="key-item shift-key" @click="toggleShift">
						<u-icon name="arrow-up" size="16" color="#333"></u-icon>
					</view>
					<view 
						class="key-item"
						v-for="key in thirdRow" 
						:key="key"
						@click="onKeyPress(key)"
					>
						{{ key }}
					</view>
					<view class="key-item delete-key" @click="deleteChar">
						<u-icon name="close" size="16" color="#333"></u-icon>
					</view>
				</view>
				
				<!-- 第四行 -->
				<view class="key-row">
					<view class="key-item function-key" @click="toggleKeyboard">
						123
					</view>
					<view class="key-item function-key" @click="toggleLanguage">
						<u-icon name="globe" size="16" color="#333"></u-icon>
					</view>
					<view class="key-item function-key" @click="startVoiceInput">
						<u-icon name="mic" size="16" color="#333"></u-icon>
					</view>
					<view class="key-item space-key" @click="addSpace">
						空格
					</view>
					<view 
						class="key-item send-key"
						:class="{ 'active': canSend }"
						@click="sendMessage"
					>
						发送
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 聊天消息
				messages: [],
				scrollTop: 0,
				
				// 输入相关
				inputText: '',
				showKeyboard: false,
				isShift: false,
				
				// 联想词
				suggestions: ['我', '你', '在', '这', '是', '不', '一', '那'],
				
				// 键盘布局
				firstRow: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
				secondRow: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
				thirdRow: ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
				
				// 智能回复模板
				replyTemplates: [
					{
						title: '热门资讯',
						content: [
							'1元预定K165养生壶',
							'为何满200元不包邮',
							'包邮条件',
							'如何开发票',
							'付款后多久发货'
						]
					},
					{
						title: '常见问题',
						content: [
							'如何修改收货地址',
							'如何申请退款',
							'如何查看订单状态',
							'如何联系客服',
							'如何获得优惠券'
						]
					},
					{
						title: '购物指南',
						content: [
							'新用户注册流程',
							'如何选择商品',
							'支付方式说明',
							'配送时间说明',
							'售后服务政策'
						]
					}
				]
			}
		},
		computed: {
			// 是否可以发送消息
			canSend() {
				return this.inputText.trim().length > 0;
			}
		},
		onLoad() {
			// 页面加载时发送欢迎消息
			this.sendWelcomeMessage();
		},
		methods: {
			// 发送欢迎消息
			sendWelcomeMessage() {
				const welcomeMessage = {
					type: 'service',
					title: '热门资讯',
					content: [
						'1元预定K165养生壶',
						'为何满200元不包邮',
						'包邮条件',
						'如何开发票',
						'付款后多久发货'
					],
					timestamp: new Date().getTime()
				};
				
				this.messages.push(welcomeMessage);
				this.scrollToBottom();
			},
			
			// 输入框变化
			onInputChange(value) {
				this.inputText = value;
				// 这里可以根据输入内容更新联想词
				this.updateSuggestions();
			},
			
			// 输入框获得焦点
			onInputFocus() {
				this.showKeyboard = true;
			},
			
			// 输入框失去焦点
			onInputBlur() {
				// 延迟隐藏键盘，避免点击键盘按钮时立即隐藏
				setTimeout(() => {
					this.showKeyboard = false;
				}, 100);
			},
			
			// 更新联想词
			updateSuggestions() {
				// 这里可以根据输入内容动态更新联想词
				// 简单示例，实际项目中可以调用接口获取
				if (this.inputText.includes('包邮')) {
					this.suggestions = ['包邮条件', '满多少包邮', '包邮政策'];
				} else if (this.inputText.includes('发票')) {
					this.suggestions = ['如何开发票', '发票类型', '发票信息'];
				} else {
					this.suggestions = ['我', '你', '在', '这', '是', '不', '一', '那'];
				}
			},
			
			// 选择联想词
			selectSuggestion(word) {
				this.inputText += word;
			},
			
			// 键盘按键处理
			onKeyPress(key) {
				const char = this.isShift ? key.toUpperCase() : key.toLowerCase();
				this.inputText += char;
			},
			
			// 切换大小写
			toggleShift() {
				this.isShift = !this.isShift;
			},
			
			// 删除字符
			deleteChar() {
				if (this.inputText.length > 0) {
					this.inputText = this.inputText.slice(0, -1);
				}
			},
			
			// 添加空格
			addSpace() {
				this.inputText += ' ';
			},
			
			// 切换键盘类型
			toggleKeyboard() {
				// 这里可以切换到数字键盘
				uni.showToast({
					title: '切换到数字键盘',
					icon: 'none'
				});
			},
			
			// 切换语言
			toggleLanguage() {
				uni.showToast({
					title: '切换输入法',
					icon: 'none'
				});
			},
			
			// 开始语音输入
			startVoiceInput() {
				uni.showToast({
					title: '开始语音输入',
					icon: 'none'
				});
			},
			
			// 切换语音输入
			toggleVoiceInput() {
				uni.showToast({
					title: '语音输入功能',
					icon: 'none'
				});
			},
			
			// 发送消息
			sendMessage() {
				if (!this.canSend) return;
				
				// 添加用户消息
				const userMessage = {
					type: 'user',
					content: this.inputText,
					timestamp: new Date().getTime()
				};
				
				this.messages.push(userMessage);
				this.scrollToBottom();
				
				// 清空输入框
				this.inputText = '';
				
				// 模拟智能回复
				setTimeout(() => {
					this.sendAutoReply();
				}, 1000);
			},
			
			// 发送自动回复
			sendAutoReply() {
				// 随机选择一个回复模板
				const randomTemplate = this.replyTemplates[Math.floor(Math.random() * this.replyTemplates.length)];
				
				const autoReply = {
					type: 'service',
					title: randomTemplate.title,
					content: randomTemplate.content,
					timestamp: new Date().getTime()
				};
				
				this.messages.push(autoReply);
				this.scrollToBottom();
			},
			
			// 滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					this.scrollTop = 999999;
				});
			},
			
			// 加载更多消息
			loadMoreMessages() {
				// 这里可以加载历史消息
				console.log('加载更多历史消息');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-container {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	// 聊天消息区域
	.chat-messages {
		flex: 1;
		padding: 20rpx;
		background-color: #f5f5f5;
	}
	
	// 消息项
	.message-item {
		margin-bottom: 30rpx;
		
		&.user-message {
			.user-message-content {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				
				.message-bubble {
					background-color: #007aff;
					color: #fff;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
					max-width: 70%;
					margin-right: 20rpx;
					word-wrap: break-word;
				}
				
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #007aff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		&.service-message {
			.service-message-content {
				display: flex;
				align-items: flex-start;
				
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background-color: #ff4757;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
				}
				
				.message-bubble {
					background-color: #fff;
					padding: 20rpx 30rpx;
					border-radius: 20rpx;
					max-width: 70%;
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						left: -10rpx;
						top: 20rpx;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 10rpx solid #fff;
					}
					
					.message-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 15rpx;
					}
					
					.message-content {
						.message-text {
							font-size: 26rpx;
							color: #666;
							line-height: 1.5;
							margin-bottom: 8rpx;
							
							&:last-child {
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
	}
	
	// 输入区域
	.input-area {
		background-color: #fff;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.voice-btn {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.input-wrapper {
			flex: 1;
			background-color: #f8f8f8;
			border-radius: 30rpx;
			padding: 0 20rpx;
		}
		
		.send-btn {
			padding: 15rpx 30rpx;
			background-color: #ccc;
			color: #999;
			border-radius: 20rpx;
			font-size: 26rpx;
			
			&.active {
				background-color: #007aff;
				color: #fff;
			}
		}
	}
	
	// 键盘容器
	.keyboard-container {
		background-color: #f0f0f0;
		border-top: 1rpx solid #ddd;
	}
	
	// 联想词栏
	.suggestion-bar {
		display: flex;
		padding: 15rpx 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		overflow-x: auto;
		
		.suggestion-item {
			padding: 8rpx 16rpx;
			background-color: #f0f0f0;
			border-radius: 15rpx;
			margin-right: 15rpx;
			font-size: 24rpx;
			color: #333;
			white-space: nowrap;
		}
		
		.suggestion-arrow {
			padding: 8rpx;
			display: flex;
			align-items: center;
		}
	}
	
	// 键盘
	.keyboard {
		padding: 10rpx;
		
		.key-row {
			display: flex;
			margin-bottom: 10rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		.key-item {
			flex: 1;
			height: 80rpx;
			background-color: #fff;
			margin: 0 3rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			
			&:active {
				background-color: #e0e0e0;
			}
			
			&.shift-key,
			&.delete-key,
			&.function-key {
				flex: 0.8;
			}
			
			&.space-key {
				flex: 3;
			}
			
			&.send-key {
				flex: 1.2;
				background-color: #ccc;
				color: #999;
				
				&.active {
					background-color: #007aff;
					color: #fff;
				}
			}
		}
	}
</style>
